<template>
	<!-- 搜索 -->
	<view class="search">
		<!-- <search-input></search-input> -->
		<!-- <uni-search-bar name radius="100" bgColor="#ededed" @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus" @input="input" @clear="clear"  clearButton="auto" cancelButton="none" placeholder="输入商家名称，商品名称">
			<uni-icons slot="searchIcon" color="#999999" size="18" type="search" />
		</uni-search-bar> -->
		<u-search placeholder="输入商家名称" v-model="searchValue" @search="search" :show-action="false"></u-search>
		<view class="history">
			<view class="searchTitle">
				搜索记录
			</view>
			<text class="searchItem" v-for="(item,index) in historyList" :key="index" @click="goResult(index)">{{item}}</text>
		</view>
		<!-- <view class="hotSearch">
			<view class="searchTitle">
				热门搜索
			</view>
			<text class="searchItem" v-for="(item,index) in hotSearchList" :key="index" @click="goResult(index)">{{item}}</text>
		</view> -->
	</view>
</template>

<script>
	// import searchInput from '../../components/search/searchInput.vue'
	export default {
		data() {
			return {
				searchValue:'',
				// historyList:['鸡蛋灌饼'],
				historyList:[],
				// hotSearchList:['水果冰粉','梅干菜烧饼','炒酸奶','冒烤鸭','吐司面包']
			}
		},
		components:{
			// searchInput
		},
		onLoad() {
			if(uni.getStorageSync('search')) {
				this.historyList = uni.getStorageSync('search')
			}
		},
		methods: {
			search(val){
				var obj = Array()
				obj.unshift(val)
				let objArr = [val,...this.historyList]
				this.historyList = [...new Set(objArr)]
				uni.setStorage({
					key: 'search',
					data: this.historyList,
				})
				uni.navigateTo({
					url:'./searchResult?value=' + val
				})
			},
			goResult(i) {
				uni.navigateTo({
					url:'./searchResult?value=' + this.historyList[i]
				})
			},
			// search() {
			// 	uni.navigateTo({
			// 		url:'searchResult'
			// 	})
			// },
			// focus(){
			// },
			// blur(){
				
			// },
			// clear(){
				
			// },
			
		},
		watch: {
			// 这里的演示为证明通过v-model绑定值，它是双向绑定的，意味着您无需监听change事件
			// 也能知道value值当前的内容
			value(val) {

			}
		},
	}
</script>

<style lang="scss" scoped>
	.uni-searchbar{
		width:100%;
	}
.search {
 	display: flex;
	height: 1500rpx;
 	flex-direction: column;
	padding: 30rpx;
 }
 .uni-searchbar{
	 padding:0;
 }
 .searchTitle{
	 font-size: 28rpx;
	 font-family: PingFang;
	 font-weight: 500;
	 color: #1C1C1C;
	 line-height: 90rpx;
 }
 .searchItem{
	 display: inline-flex;
	 align-items: center;
	 justify-content: center;
	 flex-wrap: nowrap;
	 margin:17rpx;
	 padding: 0 27rpx;
	 width: auto;
	 height: 63rpx;
	 background: #F6F6F6;
	 border-radius: 32rpx;
	 font-size: 24rpx;
	 font-family: PingFang SC;
	 font-weight: 400;
	 color: #333333;
	 /* line-height: 45rpx; */
 }
</style>
